<template>
  <div class="container">
    <Row style="height: 100%">
      <i-col span="20" style="height: 100%"> 
        <div class="luckysheet" id="hideTag"></div>
      </i-col>
      <i-col span="4" style="height: 100%"> 
        <Card :bordered="false">
            <p slot="title">单元格隐藏属性</p>
            <p>
            <Form :model="formItem" :label-width="90">
                <Form-item label="设置类型">
                    <Select v-model="formItem.select" placeholder="请选择">
                        <Option value="0">设置tag值</Option>
                        <Option value="1">获取tag值</Option>
                    </Select>
                </Form-item>
                <Form-item label="单元格所在行">
                    <Input v-model="formItem.row" placeholder="请输入"></Input>
                </Form-item>
                <Form-item label="单元格所在列">
                    <Input v-model="formItem.column" placeholder="请输入"></Input>
                </Form-item>
                <Form-item label="设置的值">
                    <Input v-model="formItem.val" placeholder="请输入"></Input>
                </Form-item>
                <Form-item label="">
                    <Button type="primary" @click="fSubmit">提交</Button>
                </Form-item>
            </Form>
            </p>
        </Card>
      </i-col>
    </Row>
  </div>
</template>

<script>
import { cellData } from "../../demoData/cell/originValue/cellData";
export default {
  name: "hideTag",
  data() {
    return {
      options: {
        container: "hideTag", // 设定DOM容器的id
        title: "单元格隐藏属性", // 设定表格名称
        lang: "zh", // 设定表格语言
        userImage:
          "https://cdn.jsdelivr.net/npm/luckyresources@1.0.3/assets/img/logo/logo.png", // 头像url
        userInfo: "方云", //用户信息
        showinfobar: false,
        showtoolbar: false,
        showsheetbar: false,
        showstatisticBar: false,
        data: [
          //数据
          {
            name: "表一", //工作表名称
            color: "",
            index: 0, //唯一id
            status: 1,
            order: 0,
            celldata: cellData(),
            config: {},
          },
        ],
      },
      //操作表
      formItem: {
        select: "0",
        row: 1,
        column: 1,
        val: "你好！",
      },
    };
  },
  methods: {
    //提交
    fSubmit() {
      var row = this.formItem.row - 1,
        column = this.formItem.column - 1;
      if (this.formItem.select == "0") {
        //设置原始值
        luckysheet.setCellValue(row, column, {tag: this.formItem.val});
        this.$Message.info("设置成功！");
      } else {
        //获取原始值
        var val = luckysheet.getCellValue(row,column,{type: 'tag'});
        alert('隐藏tag值：'+val);
      }
    },
  },
  mounted() {
    // 初始化表格
    luckysheet.create(this.options);
  },
};
</script>

<style scoped>
.luckysheet {
  width: 100%;
  height: 100%;
}
</style>
